<template>
	<view class="index">
		<view class="swiper">
			<swiper
				class="swiper" 
				:indicator-dots="true" 
				:autoplay="true" 
				:interval="2000" 
				:duration="500">
				 <swiper-item v-for="item in SwiperList" :key="item.id">
					 <view class="swiper-item">
						 <image :src="item.img" mode=""></image>
					 </view>
				 </swiper-item>
			</swiper>
		</view>
		<uni-notice-bar showIcon="true" scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
		<view class="grid">
			<view class="grid-item" v-for="item in GridList" :key="item.id">
				<navigator :url="item.path">
					<view><image class="image" :src="item.img"></image></view>
					<view class="gstitle">{{ item.title }}</view>
				</navigator>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	export default {
		components: {uniNoticeBar},
		data() {
			return {
				SwiperList:[
					{id:1,img:'../../static/one.jpg'},
					{id:2,img:'../../static/two.jpg'},
					{id:3,img:'../../static/two.jpg'}
				],
				GridList:[
					{id:1,path:'../shopbuy/shopbuy',img:'../../static/shangcheng.png',title:'商城购买'},
					{id:2,path:'../logistics/logistics',img:'../../static/wuliu.png',title:'物流信息'},
					{id:3,path:'../video/video',img:'../../static/shipin.png',title:'视频专区'},
					{id:4,path:'../images/images',img:'../../static/tupian.png',title:'图片分享'},
					{id:5,path:'../leaving/leaving',img:'../../static/fankui.png',title:'留言反馈'},
					{id:6,path:'../contact/contact',img:'../../static/lianxi.png',title:'联系我们'}
				],
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
.swiper image{
	height: 200px;
	width: 100%;
}

.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	line-height: 30rpx;
}
.grid-item {
	width: 33.3%;
	height: 213rpx;
	text-align: center;
	border:1rpx solid #F1F1F1;
	box-sizing:border-box;
}
.image {
	margin-top: 40rpx;
	width: 80rpx;
	height: 80rpx;
}
.gstitle {
	width: 100%;
	height: 34rpx;
	line-height: 30rpx;
	color: #06121e;
	font-size: 30rpx;
	margin-top: 20rpx;
}

</style>
